import React, {Component} from 'react';
import * as colors from '../utils/ColorUtils';
import {screenWidth} from '../utils/StylesUtils';
import {Actions} from 'react-native-router-flux';
import {
    TouchableOpacity,
    View, StyleSheet,
    Image, Text,
    WebView
} from 'react-native';

export default class ArticleDetailPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.container_01}>
                    <TouchableOpacity onPress={() => Actions.pop()}>
                        <Image style={styles.back} source={{uri: 'icon_back'}}/>
                    </TouchableOpacity>
                    <Text style={styles.title} ellipsizeMode='tail'
                          numberOfLines={1}>{this.props.title}</Text>
                </View>
                <View style={styles.container_02}>
                    <WebView
                        style={styles.webview}
                        source={{uri: this.props.link}}
                        automaticallyAdjustContentInsets={true}
                        domStorageEnabled={true}
                        javaScriptEnabled={true}
                        scalesPageToFit={true}
                        startInLoadingState={true}
                    />
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.colorBg,
        flexDirection: "column",
        alignItems: "center"
    },
    container_01: {
        width: screenWidth,
        height: 50,
        backgroundColor: colors.white,
        flexDirection: 'row',
        alignItems: "center",
    },
    container_02: {flex: 1,marginTop:1, width: screenWidth, backgroundColor: colors.transparent},
    back: {width: 25, height: 25, marginLeft: 10},
    title: {
        width: screenWidth - 40,
        color: colors.colorTheme,
        fontSize: 14,
        marginRight: 10
    },
    webview: {
        flex: 1
    }
});